<template>
  <div>
      <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="事件上报"
        @click-left="$router.back()"
      />
       <el-table :data="tableData" style="width:100%">
          <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.id}}</span>
              </template>
          </el-table-column>
          <el-table-column label="事件内容" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.qualityContent}}</span>
              </template>
          </el-table-column>
          <el-table-column label="来源" align="center">
              <template slot-scope="scope">
                  <span v-if="scope.row.eventStatus === '1'" style="margin-left:10px">内部巡查</span>
                  <span else-if style="margin-left:10px">居民</span>
              </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="60">
              <template slot-scope="scope">
                  <span style="margin-left:10px" v-if="scope.row.eventStatus === '0'">待派发</span>
                  <span style="margin-left:10px" v-if="scope.row.eventStatus === '1'">处理中</span>
                  <span style="margin-left:10px" v-if="scope.row.eventStatus === '2'">已处理</span>
                  <span style="margin-left:10px" v-if="scope.row.eventStatus === '3'">已结束</span>
                  <span style="margin-left:10px" v-if="scope.row.eventStatus === '4'">驳回</span>
              </template>
          </el-table-column>
           <el-table-column label="状态" align="center" width="60">
               <template slot-scope="scope">
                   <el-button type="success" size="mini" @click="handleEdit(scope.row)">详情</el-button>
               </template>
           </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
    name:'event',
    data(){
        return{
            tableData: []
        }
    },
    methods:{
       async getEventListAll(){
            var {data:res} = await this.$axios({
                url:this.$location.getEventListAll
            })
            console.log(res.data)
            this.tableData=res.data
       },
       handleEdit(row){
           if (row.eventStatus==='1'){
               this.$router.push('/EventDetail/'+row.id)
           }else if (row.eventStatus==='2' || row.eventStatus==='4'){
               this.$router.push('/EventDetails/'+row.id)
           }else if (row.eventStatus==='3'){
               this.$router.push('/EventDetail3/'+row.id)
           }
       }
    },
    created(){
        this.getEventListAll()
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #3296fa;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
        }
    }
</style>